01 博客搭建方案

博客搭建方案Obsidian + Hexo (Fluid) + Vercel

一个基于Obsidian编辑器 + Hexo静态博客生成器 + Fluid主题的个人博客系统，主打免费，对于小白新手来说够用，网站完全vibecoding生成，内容以文字+图片为主，视频类内容操作方案还没搞定，暂不考虑。

特点

  • 📝 Obsidian编辑: 使用Obsidian作为主要编辑器，支持双链、图谱等功能
  • 🚀 自动部署: 通过Git同步到GitHub，Vercel自动构建发布
  • 💰 完全免费: 无需服务器成本，利用GitHub + Vercel免费套餐
  • 🎨 Fluid主题: 美观简洁的博客主题，支持暗色模式

📝 Obsidian 工作流程

想法

将 Obsidian 作为写作的“司令部”，所有文章的创建、编辑和版本管理都在此完成。通过 Obsidian Git 插件，可以实现内容的自动备份和推送到 GitHub，进而触发 Vercel 的自动部署，实现“一次提交，全网更新”。

推荐插件

在 Obsidian 的社区插件市场中安装并启用以下插件：

  1.  Git: 核心插件。用于在 Obsidian 内部执行 Git 操作，实现自动或手动的提交 (commit) 和推送 (push)。
  2.  Templater: 用于创建灵活的文章模板，自动填充标题、日期等信息，极大提高效率。
  3.  Paste Image Rename: 粘贴图片时自动重命名并移动到指定文件夹，保持资源整洁。

配置步骤

1. 配置 Git

这是实现自动化的关键一步。

  1.  安装插件后，在 Obsidian 设置中找到 “Git”。

  2. 将Obsidian库文件夹初始化为Git仓库，点击左侧按钮”>_”，输入“Git:init”，选择”Git: Initialize a new repo“按回车就行。

  3. 在Github上创建一个博客前端仓库，如”myblog“。

  4. 将本地仓库与这个新建的远程仓库相关联。通过git插件命令面板或者命令行实现的方法。

    • 点击左侧按钮”>_”，输入“Git，选择”Git:Edit remotes”
    • 为远程仓库本地别名，可同样命名“My blog”
    • 在下一个输入框填入GitHub仓库的URL，

  5. 设置自动同步时间和同步方式，如下：

  6. 现在我们已成功使本地分支与远程仓库分支关联起来，Git插件能够正常实现拉取远程更新/推送本地更新到远程 。

2. 配置 Templater 文章模板

一个好的模板可以省去大量重复工作。遵循统一的格式规范，有助于内容管理和主题渲染。

  1.  在 Obsidian 的设置中找到 “Templater” 插件。
  2.  设置模板文件夹路径，例如 templates。
  3.  在 templates 文件夹下创建一个名为 article.md 的模板文件，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: <% tp.file.title %>
date: <% tp.date.now("YYYY-MM-DD HH:mm:ss") %>
tags:
  - 技术
categories:
  - 技术笔记
description: "在这里写下文章的简短描述，会显示在文章列表和搜索引擎结果中。"
---
<!-- more -->

## 引言
在这里开始你的正文...
  •   <% tp.file.title %>: 会自动获取你创建的文件名作为文章标题。
  •   <% tp.date.now(...) %>: 自动生成当前的日期和时间。
  •   <!-- more -->: Hexo 的截断标记，此标记之前的内容会成为文章摘要。

3. 设置图片存放位置

-点击“齿轮”图标，选择“文件与链接”，操作如下：

写作与发布流程

  1.  创建新文章:
        *   在 Obsidian 的目标文件夹（如 myblog/source/_posts）下右键，选择 “Templater: Create new note from template”。
        *   选择刚刚创建的 article 模板。
        *   输入文件名。Hexo 的永久链接会自动处理，无需手动加日期。
  2.  编辑内容:
        *   在 Obsidian 中专注写作，享受 Markdown 带来的流畅体验。
        *   插入图片: 直接从剪贴板粘贴图片，Paste Image Rename 插件会自动按设定的规则重命名，图片会被自动存储在此前设置img文件夹目录下，并生成引用链接。
  3.  提交与发布:

    *   自动发布: 如果你配置了 Obsidian Git 的自动推送，那么在你写作的过程中，修改会被定期推送到 GitHub，Vercel 会自动拉取最新代码并部署。通常 1-2 分钟后，你的新文章就会出现在线上博客中。

补充

如果觉得Git复杂，可以考虑Obsidian+Github Desktop+Hexo+ Vercel的方案，其他操作都一样，就是Git操作用GitHub Desktop代替，操作如下：

  • 下载，安装并登录GitHub Desktop
  • 添加远程仓库
  • 新建obsidian仓库与网站前端存在博客文章的文件夹关联
  • 此时在文件夹内增加文件，则GitHub Desktop会在文章操作完成后同步更新信息，最后点击“Commit”和右侧的“push”，即可同步到远程仓库中。
  • 缺点：半自动化